import { ModalForm, ProFormCheckbox, ProFormText } from '@ant-design/pro-form';
import { FC } from 'react';
import { checkRoleList } from '@/pages/system/Role/role';

export type CreateFormData = {
  createModalVisible: boolean;
  handleCreateModalVisible: any;
  handleCreate: (values: ADMIN.AdminUser) => void;
};

const CreateForm: FC<CreateFormData> = (props) => {
  const { createModalVisible, handleCreateModalVisible, handleCreate } = props;

  return (
    <>
      {/* 新建表单 */}
      <ModalForm<ADMIN.AdminUser>
        title="新建用户"
        width="500px"
        visible={createModalVisible}
        onVisibleChange={handleCreateModalVisible}
        onFinish={async (value) => {
          handleCreate(value);
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '用户名必填',
            },
          ]}
          width="lg"
          name="username"
          label="用户名"
          placeholder="请再次输入用户名"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '昵称必填',
            },
          ]}
          width="lg"
          name="name"
          label="昵称"
          placeholder="请再次输入昵称"
        />
        <ProFormText.Password
          name="password"
          label="密码"
          width="lg"
          placeholder="请输入密码"
          rules={[
            {
              required: true,
              message: '请输入密码',
            },
            {
              min: 6,
              message: '最少6位密码',
            },
          ]}
        />
        <ProFormCheckbox.Group
          name="roles"
          label="角色"
          request={async () => await checkRoleList()}
          placeholder="请选择角色"
        />
      </ModalForm>
    </>
  );
};

export default CreateForm;
